﻿<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>At the Races</title>
</head>
<body>
    <div style="background-clip:content-box; background-image: url()">
<pre style="line-height: 0.75em;" id="Pre11"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x;"  id ="div1">
<pre style="line-height: 0.75em; float:left; " id="textRegion_0"></pre><p><img sytle="float:right " name="Mainpic" src="horse_0.gif"></p><pre style="line-height: 0.75em;" id="Pre1"></pre></div>
<div style="background-image: url(track.jpg); background-repeat:repeat-x;" id ="div2">
<pre style="line-height: 0.75em; float:left;" id="textRegion_1"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_1.gif"></p><pre style="line-height: 0.75em;" id="Pre2"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x;" id ="div3">
<pre style="line-height: 0.75em; float:left;" id="textRegion_2"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_2.gif"></p><pre style="line-height: 0.75em;" id="Pre3"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div4">
<pre style="line-height: 0.75em; float:left;" id="textRegion_3"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_3.gif"></p><pre style="line-height: 0.75em;" id="Pre4"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div5">
<pre style="line-height: 0.75em; float:left;" id="textRegion_4"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_4.gif"></p><pre style="line-height: 0.75em;" id="Pre5"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div6">
<pre style="line-height: 0.75em; float:left;" id="textRegion_5"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_5.gif"></p><pre style="line-height: 0.75em;" id="Pre6"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div7">
<pre style="line-height: 0.75em; float:left;" id="textRegion_6"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_6.gif"></p><pre style="line-height: 0.75em;" id="Pre7"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div8">
<pre style="line-height: 0.75em; float:left;" id="textRegion_7"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_7.gif"></p><pre style="line-height: 0.75em;" id="Pre8"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div9">
<pre style="line-height: 0.75em; float:left;" id="textRegion_8"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_8.gif"></p><pre style="line-height: 0.75em;" id="Pre9"></pre>
<div style="background-image: url(track.jpg); background-repeat:repeat-x"  id ="div10">
<pre style="line-height: 0.75em; float:left;" id="textRegion_9"></pre><p><img sytle="float:right" name="Mainpic_1" src="horse_9.gif"></p><pre style="line-height: 0.75em;" id="Pre10"></pre>
    </div>
<script>
    // think of these variables as the important
    // parameters for our race simulation. Changing
    // any of these significantly changes the behavior of
    // the simulation.
    var maxHorseSpeed = 5;
    var numHorses = 10;
    var finishLine = 200;
    var delayPerUpdate = 5;
    var m = 0, r = -1;
    var img_num = "horse_0.gif";
    // declare an array of horses.
    var horses = [];
    var v;
    var place = 0;
    var bet_amount, bet_pos, settings, finish_space = " ", pre_name, div_name, px_name, cheat;

    // fill array with new horses.


    //Draw all horses at the starting line, before any horse has moved.
    settings = confirm("You don't want to change the settings do you?");
    if (!settings) {
        maxHorseSpeed = prompt("How fast can the horses go?", 5);
        numHorses = prompt("How many horses?(1-10)", 10);
        finishLine = prompt("How far is the distence?(keep under 250 to keep horses on screen)", 200);

        delayPerUpdate = prompt("How fast is the simulation? (lower value is faster)", 5);
    }
    bet_amount = confirm("Do you want to bet?");
    if (bet_amount) {
        bet_amount = prompt("How Much do you want to bet?", 100);
        bet_pos = prompt("And which horse?", 1);
    }
    for (var b = Number(finishLine) + 7; b > 0; b--) {
        finish_space = finish_space + "";
    }
    finish_space = finish_space + "";
    for (var g = 9; g > 0; g--) {
        pre_name = "Pre" + g;
        document.getElementById(pre_name).innerHTML = finish_space;
    }
    px_name = finishLine * 8 + 70 + "px";
    for (var k = 10; k > 0; k--) {
        div_name = "div" + k;

        document.getElementById(div_name).style.maxWidth = px_name;
    }
    alert("press p to pause");

    // needs to be after change to settings
    for (var i = 0; i < numHorses; ++i) {
        horses[i] = new Horse("textRegion_" + i);
    }


    drawHorses();

    // Start a timer that will call the function updateRace every <delayPerFrame> milliseconds.
    // Keep a variable for this timer so we can stop the clock when the race ends.
    var clock = setInterval(updateRace, delayPerUpdate);

    // Constructor for a Horse object.
    function Horse(pos_name) {
        this.speed = getRandomInt(1, maxHorseSpeed);
        this.position = 0;
        this.pos_name = pos_name;

        this.run = function () {
            this.position += getRandomInt(1, this.speed);
        }
    }

    // Creates a string that represents the current position of all horses,
    // and writes that string to the screen.
    function drawHorses() {
        var text = "";
        var horse;

        for (var horseIndex = 0; horseIndex < horses.length; ++horseIndex) {

            //add spaces to the output text to show that the horse has moved.
            for (var pos = 0; pos < horses[horseIndex].position; ++pos) {
                text += " ";
            }
            setText(text, horses[horseIndex].pos_name, r);
            text = "";
            //add the horses's number to the string, and add a line break.
            //text += "\n";
        }

        //draw the string

    }

    // Pick a random horse, move it, and test whether that horse has
    // crossed the finish line. If the horse has crossed the finish line,
    // stop the clock because the race is over.
    function updateRace() {

        // pick a random horse...
        var horseIndex = getRandomInt(0, horses.length - 1);

        // ...and move it.
        horses[horseIndex].run();

        // if this horse has crossed the finish line, the race is over.
        if (horses[horseIndex].position > finishLine - 5) {
            clearInterval(clock);
            r = horseIndex + 1;
            if (!cheat) {
                setText("#" + r + " wins!", horses[horseIndex].pos_name, r);
                if (bet_pos == horseIndex) {
                    alert("Horse #" + r + " wins! \n" + "You won " + bet_amount * 3 + " Awesome!");
                }
                if (bet_pos != horseIndex) {
                    alert("Horse #" + r + " wins! \n" + "Better luck next time.");
                }
            }
            if (cheat) {
                bet_pos = bet_pos - 1;
                setText("#" + r + " wins!", horses[horseIndex].pos_name, r);
                bet_pos = bet_pos + 1;
                alert("Horse #" + bet_pos + " wins!" + "You won " + bet_amount * 3 + " Awesome!");
            }

        }
        else {
            drawHorses();
        }
    }

    // Returns a random integer between min and max (inclusive).
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Changes the text within a specific html element so that we can
    // write text in the browser window.
    function setText(text, pos_name, r) {
        // notice that the argument "textRegion" is the id of the <pre> element in the html above.
       
        if (place > numHorses) {
            place = 1;
        }
        place++
        if (r == -1) {
            document.getElementById(pos_name).innerHTML = text;
            document.getElementById(pos_name).innerHTML = text + "Horse #" + place;
        }
        if (r != -1) {
            for (var m = numHorses - 1; m >= 0; m--) {
                document.getElementById("textRegion_" + m).innerHTML = "";
            }
            if (!cheat) {
                document.getElementById(pos_name).innerHTML = text;
            }
            if (cheat) {
                // still not sure if i like the way this looks
                //pos_name = "textRegion_" + bet_pos;
                document.getElementById(pos_name).innerHTML = text;
            }
        }


        function p_Pressed() {
            alert("Race paused");
        }
        function c_Pressed() {
            cheat = true;
        }

        document.onkeydown = function (evt) {
            evt = evt || window.event;
            switch (evt.keyCode) {
                case 80:
                    p_Pressed();
                    break;
                case 67:
                    c_Pressed();
                    break;
            }
        };






        //if (r != -1) {
        //m = r;
        //}
        //img_num = "horse_"+m+".gif";
        //img_num = "horse_4.gif"
        //document.Mainpic.src = img_num;
    }
</script>
</body>
</html>